<%-- 
    Document   : index
    Created on : 18-nov-2013, 11.35.34
    Author     : Ilo
--%>

<%@page import="it.evento.utils.genpage.Article"%>
<%@page import="it.evento.utils.genpage.ArticleRow"%>
<%@page import="it.evento.utils.genpage.RowCell"%>
<%@page import="it.evento.Users"%>
<%@page import="it.evento.utils.genpage.BlogPost"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%
    boolean isLoggedUser = false;
    Users loggedUser = null;
    
    if(session.getAttribute("loggedUser")!=null) {
        loggedUser = (Users)session.getAttribute("loggedUser");
        isLoggedUser = true;
    }
    else {
        isLoggedUser = false;
    }
%> 

<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
    <head>
        <title>EvenTO</title>

        <jsp:include page="html/metadata.jsp" flush="true" />
        
        <script>
            $(document).ready(function() {   
                var default_address = "Torino, Italia";
                var default_zoom = 13;
                var user_icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/marker_green.png",new google.maps.Size(32, 37, "px", "px"));
                var event_default_icon = new google.maps.MarkerImage("https://mts0.google.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1",new google.maps.Size(32, 37, "px", "px"));
                var event_culture_icon = new google.maps.MarkerImage("images/map-icons/museum_crafts_marker.png",new google.maps.Size(32, 37, "px", "px"));
                var event_music_icon = new google.maps.MarkerImage("images/map-icons/dancinghall_marker.png",new google.maps.Size(32, 37, "px", "px"));
                var event_sport_icon = new google.maps.MarkerImage("images/map-icons/usfootball_marker.png",new google.maps.Size(32, 37, "px", "px"));
                var event_night_icon = new google.maps.MarkerImage("images/map-icons/bar_coktail_marker.png",new google.maps.Size(32, 37, "px", "px"));
                var event_food_icon = new google.maps.MarkerImage("images/map-icons/fastfood_marker.png",new google.maps.Size(32, 37, "px", "px"));
                var event_festival_icon = new google.maps.MarkerImage("images/map-icons/festival_marker.png",new google.maps.Size(32, 37, "px", "px"));
                var event_course_icon = new google.maps.MarkerImage("images/map-icons/university_marker.png",new google.maps.Size(32, 37, "px", "px"));
                        
               $("#main_map").gmap3({
                    map:{
                        address: default_address,
                        options:{
                            center: default_address,
                            zoom: default_zoom,
                            mapTypeId: google.maps.MapTypeId.MAP,
                            mapTypeControl: true,
                            mapTypeControlOptions: {
                                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                            },
                            navigationControl: true,
                            scrollwheel: true,
                            streetViewControl: true
                        }
                    },
                    getgeoloc:{
                        callback : function(latLng){
                            if (latLng){
                                $(this).gmap3({
                                    map: {
                                        latLng: latLng,
                                        options: {
                                            center: latLng,
                                            zoom: default_zoom
                                        }
                                    },
                                    marker: {
                                        latLng: latLng,
                                        options: {
                                            icon: user_icon
                                        }
                                    }
                                });
                            }
                            else {
                                $(this).gmap3({
                                    marker: {
                                        address: default_address,
                                        options: {
                                            icon: user_icon
                                        }
                                    }
                                });
                            }
                        }
                    }
                });
                
                /* Load events location */
                $.post("Controller",
                       {type: "loadEventsLocation",
                        eventId: ""},
                       function(data) {
                           if(data.status===0) {
                               $("#main_map").gmap3({
                                    marker: {
                                        values: generateEventsMarkers(data.locations),
                                        cluster: {
                                            radius:100,
                                            0: {    // This style will be used for clusters with more than 0 markers
                                                content: "<div class='cluster'>CLUSTER_COUNT</div>",
                                                width: 53,
                                                height: 52
                                            },
                                            10: {   // This style will be used for clusters with more than 10 markers
                                                content: "<div class='cluster'>CLUSTER_COUNT</div>",
                                                width: 56,
                                                height: 55
                                            },
                                            25: {   // This style will be used for clusters with more than 25 markers
                                                content: "<div class='cluster'>CLUSTER_COUNT</div>",
                                                width: 66,
                                                height: 65
                                            },
                                            50: {   // This style will be used for clusters with more than 50 markers
                                                content: "<div class='cluster'>CLUSTER_COUNT</div>",
                                                width: 86,
                                                height: 85
                                            }
                                        },
                                        events:{
                                            mouseover: function(marker, event, context){
                                                var map = $(this).gmap3("get"),
                                                    infowindow = $(this).gmap3({get:{name:"infowindow"}});
                                                if (infowindow){
                                                    infowindow.open(map, marker);
                                                    infowindow.setContent(context.data);
                                                } 
                                                else {
                                                    $(this).gmap3({
                                                        infowindow: {
                                                            anchor: marker, 
                                                            options:{content: context.data}
                                                        }
                                                    });
                                                }
                                            },
                                            mouseout: function(){
                                                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                                                if (infowindow){
                                                    infowindow.close();
                                                }
                                            }
                                        }
                                    }
                                });
                            }
                            else {
                                $('#error_msg').html(data.message+"<br>");
                            }
                       },
                       'json');
                /* /Load events location */
                
                function generateEventsMarkers(data) {
                    jsonObj = [];
                    
                    $.each(data, function(idx, item) {
                        newMarker = new Object();
                        newMarker.address = item.location.address;
                        newMarker.data = generateMarkerLabel(item);
                        newMarker.geolocation = item.location.geolocation;

                        optionsObj = new Object();
                        switch(item.event.type) {
                            case 1:
                                optionsObj.icon = event_culture_icon;
                                break;
                            case 2:
                                optionsObj.icon = event_music_icon;
                                break;
                            case 3:
                                optionsObj.icon = event_sport_icon;
                                break;
                            case 4:
                                optionsObj.icon = event_night_icon;
                                break;
                            case 5:
                                optionsObj.icon = event_food_icon;
                                break;
                            case 6:
                                optionsObj.icon = event_festival_icon;
                                break;
                            case 7:
                                optionsObj.icon = event_course_icon;
                                break;
                            default:
                                optionsObj.icon = event_default_icon;
                                break;
                        }
                        newMarker.options = optionsObj;
                        
                        jsonObj.push(newMarker);
                    });
                    
                    return jsonObj;
                }
                
                function generateMarkerLabel(item) {
                    var str = "";
                    
                    str += "<span class='map-label'>";
                    str += "<img src='";
                    
                    switch(item.event.type) {
                            case 1:
                                str += "images/map-icons/museum_crafts.png";
                                break;
                            case 2:
                                str += "images/map-icons/dancinghall.png";
                                break;
                            case 3:
                                str += "images/map-icons/usfootball.png";
                                break;
                            case 4:
                                str += "images/map-icons/bar_coktail.png";
                                break;
                            case 5:
                                str += "images/map-icons/fastfood.png";
                                break;
                            case 6:
                                str += "images/map-icons/festival.png";
                                break;
                            case 7:
                                str += "images/map-icons/university.png";
                                break;
                            default:
                                str += "https://mts0.google.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1";
                                break;
                        }
                        str += "' />";
                        str += "<h3>" + item.event.name + "</h3>";
                        str += item.event.description;
                    str += "</span>";
                    
                    return str;
                }
            });
        </script>
    </head>
    <body>
        <div id="evento-main">
            <!-- header -->
            <jsp:include page="html/header.jsp" flush="true" />
            <!-- /header -->

            <!-- top-menu -->
            <%@include file="html/top-menu.jsp" %>
            <!-- /top-menu -->

            <div class="evento-sheet clearfix">
                <div class="evento-layout-wrapper">
                    <div class="evento-content-layout">
                        <div class="evento-content-layout-row">
                            <div class="evento-layout-cell evento-content">
                                <article class="evento-post evento-article">
                                    <div class="evento-postmetadataheader">
                                        <h2 class="evento-postheader">
                                            Mappa eventi
                                        </h2>
                                    </div>
                                    <div class="evento-postcontent evento-postcontent-0 clearfix">
                                        <div class="evento-content-layout">
                                            <div class="evento-content-layout-row">
                                                <div class="evento-layout-cell layout-item-0" style="width: 100%">
                                                    <div id="error_msg"></div>
                                                    <div id="main_map" class="map"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>

                            <!-- sidebar -->
                            <jsp:include page="html/sidebar.jsp" />
                            <!-- /sidebar -->
                            
                        </div>
                    </div>
                </div>

                <!-- footer -->
                <%@include file="html/footer.jsp" %>
                <!-- /footer -->

            </div>
        </div>
    </body>
</html>
